import React from "react";
import './eg.css';

// 该内容为评论组件
class Commit extends React.Component {
    state = {
        text: '',
        content: "",
        listBox: []
    }
    handleFun = () => {
        if (this.state.text.trim() && this.state.content.trim()) {
            this.state.listBox.unshift({
                text: this.state.text,
                content: this.state.content
            });
            this.setState({
                listBox: this.state.listBox
            });
            this.clearInput();
        }
    }
    // 清空输入框
    clearInput = () => {
        this.setState({
            text: "",
            content: "",
        })
    }
    // 双向绑定
    handleForm = (e) => {
        const target = e.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value
        })
    }

    showBox = ()=>{}

    render() {
        return (
            <div className="commit_wrap">
                <div className="title_wrap">
                    <input placeholder="晴输入评论人" type="text" name="text" value={this.state.text} onChange={this.handleForm}></input>
                </div>
                <div className="content_wrap">
                    <textarea placeholder="请输入评论内容" name="content" value={this.state.content} onChange={this.handleForm}></textarea>
                </div>
                <div className="btn_wrap">
                    <input type="button" value="发表评论" onClick={this.handleFun} ></input>
                </div>
                {
                    this.state.listBox.length === 0 ?
                        (<div className="no_data">暂无评论</div>)
                        : (
                        <div className="list_wrap">
                            <h2>评论列表</h2>
                            <ul>
                                {
                                    this.state.listBox.map((item, index) => {
                                        return <li key={index}><h3>评论人：{item.text}</h3><p>评价内容：{item.content}</p></li>
                                    })
                                }
                            </ul>
                        </div>
                        )
                }

            </div>
        )
    }

}

export default Commit